<template>
  <div style="width: 100%;height: 100%;">
    <div :style="{'height': tableData.page?'calc(100% - 54px)':'100%'}" ref="tableH">
      <Table ref="tableDemo" stripe :highlight-row="!tableData.noHighlightRow" :loading="tableLoading" border :columns="columns" @on-selection-change="selectTable" @on-current-change="selectSingleFile" :data="tableDataList" :height="tableData.height == '100%'?tableHeight:'auot'"></Table>
    </div>
    <div style="text-align: right;margin: 10px;overflow: hidden;" v-if="tableData.page">
      <Page ref="tablePage" :total="tableTotal" show-sizer :current="page" show-elevator show-total @on-change="changePage" @on-page-size-change="changePageSize" />
    </div>
  </div>

</template>
<script>
  /*
  * 表格数据
  * 表头
  * 加载 在数据发生变化的时候加载
  * 业务出发的方法
  * */

  // tableData:{
  //   url:this.baseURL + "core/user/pageList", //请求地址    如果没有数据 不执行数据加载 只执行表格渲染
  //   method:'post', //请求方式
  //   where:this.searchCriteria, //搜索条件
  //   height:'100%', //表格高度 auto
  //   page:true, //分页是否使用
  //  noHighlightRow:true,//  本地数据操作 不是使用行内选择
  //   columns:[],  //表头数据
  //   format:{ //返回数据格式
  //      list:['data','records'],//数据list
  //      count: ['data','total'],//数据总量
  //   },
  //    dataList:[],//返回静态数据
  // },
  //  父级调用子级刷新列表方法  this.$refs.wzTbale(ref名称).tableLoadData(true);  true 分页设置1刷新

  // selectData:null,   //单机获取数据  父级获取子级单行选中数据 this.$refs.wzTbale(ref名称).selectData
  // selectDataList:[], //获得表格多选  所选择的数据list 父级获取子级单行选中数据 this.$refs.wzTbale(ref名称).selectDataList
  // 多选 获取 默认选中数据 this.$refs.wzTbale(ref名称).tableDataSelected()
  //
  //indentation 文字过多 true 缩进

  export default {
    props: ['tableData'],//接收来自父组件的数据
    data() {
      return {
        tableLoading: false,
        tableDataList: [],
        page: 1,//当前页码
        limit: 10,//当前页码
        tableTotal: 0,//总条数
        tableHeight: 400,
        selectData: null,//单机获取数据 父级获取子级单行选中数据 this.$refs.wzTbale(ref名称).selectData
        selectDataList: [],//获得表格多选 所选择的数据list 父级获取子级单行选中数据 this.$refs.wzTbale(ref名称).selectDataList
        columns:[],
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;

      that.tableLoadData();
      if (that.tableData.height == '100%') {
        that.$nextTick(function () {
          that.tableHeight = that.$refs.tableH.offsetHeight;
          window.onresize = ()=> {
            that.tableHeight = that.$refs.tableH.offsetHeight;
          };
        })
      }
      var columns = that.tableData.columns
      if(columns[0].type == 'index'){
        columns[0] = {
          title: '序号',align: 'center',width: 70,
          render: (h, params) => {
            if(that.tableData.page){//有分页
              return h("span", params.index +(this.page - 1) * this.limit + 1);
            }else{//无分页
              return h("span", params.index + 1);
            }
          }
        }
      }

      //,indentation:true
      columns.forEach((k, i) => {
        if(k.indentation){
            k.render = (h, params) => {
              return h("Poptip",{
                class:'_wz_ivu-poptip',
                props:{
                  trigger:"hover",
                  maxWidth:"300",
                  placement:"bottom",//right
                  content:!!params.row[k.key]?params.row[k.key]:'--'
                }
              },[
                  ///////////////////////////////
                  h("div",{
                    style: {
                      "width": "100%",
                      "overflow": "hidden",
                      "white-space": "nowrap",
                      "text-overflow": "ellipsis",
                    },
                  },!!params.row[k.key]?params.row[k.key]:'--')
                  ///////////////////////////////
              ]);
            }
        }
      })
      // indentation
      that.columns = columns;

      // return h("span", params.index + (this.pageNum - 1) * this.pageSize + 1);

      //{type: 'index', width: 70, align: 'center', title: '序号'},
    },
    methods: {//执行的方法
      //加载表格数据
      tableLoadData(type) {//type ture 刷新分页=1
        var that = this;

        //有数据 不请求 直接渲染
        if (!!that.tableData.dataList) {
          that.tableDataList = that.tableData.dataList;
          return false;
        }

        //判断是否搜索
        if (!!type) {
          if (that.tableData.page) {//如果不需要分页 不传输分页数据
            that.page = 1;
          }
        }
        if (!!!that.tableData.url || that.tableData.url.left == 0 || that.tableData.url == '') {//如果没有数据 不执行数据加载 只执行表格渲染
          return false;
        }
        that.tableLoading = true;//加载
        var searchCriteria = !!that.tableData.where ? that.tableData.where : {};//获取表单数据  和分页 条数
        if (that.tableData.page) {//如果不需要分页 不传输分页数据
          searchCriteria.page = that.page;
          searchCriteria.limit = that.limit;
        }

        that.selectData = null;
        if (that.tableData.method == 'post') {
          that.axios.post(that.tableData.url, searchCriteria).then(res => {
            if (!!res) {
              that.tableLoading = false;
              ///列表数据 处理 不同数据结构的
              var tableDataList = res.data;
              that.tableData.format.list.forEach(function (k, i) {
                tableDataList = tableDataList[k];
              })
              that.tableDataList = tableDataList;//返回数据
              if (that.tableData.page) {//如果不需要分页 不传输分页数据
                ///分页数据 处理 不同数据结构的
                var tableTotal = res.data;
                that.tableData.format.count.forEach(function (k, i) {
                  tableTotal = tableTotal[k];
                })
                that.tableTotal = tableTotal;
                //有分页  并且不是第一页  并且 当前页没有数据  自动请求上一页
                if(that.tableDataList.length == 0 && that.page != 1){
                  that.page = that.page - 1;
                  that.tableLoadData();
                }
              }
            }
          }).catch(err => {
            console.log("失败", err)
          })
        } else {
          that.axios.get(that.tableData.url,  {params:searchCriteria}).then(res => {
            if (!!res) {
              that.tableLoading = false;
              ///列表数据 处理 不同数据结构的
              var tableDataList = res.data;
              that.tableData.format.list.forEach(function (k, i) {
                tableDataList = tableDataList[k];
              })
              that.tableDataList = tableDataList;//返回数据
              if (that.tableData.page) {//如果不需要分页 不传输分页数据
                ///分页数据 处理 不同数据结构的
                var tableTotal = res.data;
                that.tableData.format.count.forEach(function (k, i) {
                  tableTotal = tableTotal[k];
                })
                that.tableTotal = tableTotal;
                //有分页  并且不是第一页  并且 当前页没有数据  自动请求上一页
                if(that.tableDataList.length == 0 && that.page != 1){
                  that.page = that.page - 1;
                  that.tableLoadData();
                }
              }
            }
          }).catch(err => {
            console.log("失败", err)
          })
        }





      },
      //单行选中
      selectSingleFile(currentRow, oldCurrentRow) {
        this.selectData = JSON.parse(JSON.stringify(currentRow));//修改赋值
      },
      //返回第几页
      changePage(page) {
        this.page = page;//设置当前页数
        this.tableLoadData();
      },
      //设置当前页数
      changePageSize(size) {
        this.limit = size;
        this.tableLoadData();
      },
      //在多选模式下有效，只要选中项发生变化时就会触发
      selectTable(selection) {
        this.selectDataList = selection;
      },
      //多选 获取 默认选中数据
      tableDataSelected(){
        return this.$refs.tableDemo.getSelection()
      },
    },
    watch: {//监听
      tableData(news, old) {
        // this.tableLoadData();
      },

      // tableData: {
      //   // hanlder这个函数名字固定
      //   handler: function (news, old) {
      //     console.log(news)
      //     this.tableLoadData();
      //   },
      //   deep: true//对象内部的属性监听，也叫深度监听
      // },

      'tableData.dataList': {
        handler: function (news, old) {
          this.tableLoadData();
        },
        deep: true//对象内部的属性监听，也叫深度监听
      },


    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态
      window.onresize = null;
    }
  }

</script>
<style lang="less">
._wz_ivu-poptip{
  width: 100%;
  .ivu-poptip-rel{
    width: 100%;
  }

  .ivu-poptip-body-content{
    white-space: pre-wrap;
    text-align: justify;
  }
}
</style>
